<template>
    <div class="teleport">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'teleport',
    props: {
        to: {
            type: String,
            required: true
        }
    },
    mounted() {

        console.log('当前组件',this.$el)

        const toEl = document.querySelector(this.to)
        if (toEl) {
            toEl.appendChild(this.$el)
        }
    },
    destroyed() {
        const toEl = document.querySelector(this.to)
        if (toEl) {
            toEl.removeChild(this.$el)
        }
    }
}
</script>
